<!--
    * Time    : 2020-12-01 11:19:05
    * Author  : yinjing
    * Desc    : 协商记录
-->

<template>
    <div class="w750">
        <div class="parentBox">
            <div class="box" v-for="(item, index) in recordList" :key="index">
                <!-- TODO暂时只做商家和买家 后续会追加平台和供应商 更改sellertBox样式的背景颜色即可 -->
                <div :class="item.operator == 'BUYER_OPERATOR' ? 'clientBox' : 'sellertBox'">
                    <div class="author">
                        <span>{{ item.operator == 'BUYER_OPERATOR' ? '买家' : '卖家' }}</span>
                        <span>{{ item.createTime | dateformat() }}</span>
                    </div>
                    <van-divider style="margin: 13px 0" />
                    <div class="title">{{ item.actionExplain }}</div>
                    <template v-if="item.dataBO">
                        <div class="content">
                            <span>售后方式：{{ item.dataBO.serviceType == 1 ? '仅退款' : '退货退款' }}，</span>
                            <!-- <span>货物状态：{{item.dataBO.serviceType==1?'未发货，':'退货退款'}}，</span>  -->
                            <span>退款金额：¥{{ item.dataBO.refundAmount }}，</span>
                            <span>退货数量：{{ item.dataBO.goodsCount }}，</span>
                            <span>手机号码：{{ item.dataBO.userContactsPhone }}，</span>
                            <span>退款原因：{{ item.dataBO.afterSaleMessage }}，</span>
                            <span v-if="item.dataBO.afterSaleRemark">申请说明：{{ item.dataBO.afterSaleRemark }}</span>
                        </div>
                    </template>
                    <template v-else>
                        <div class="content">
                            <span v-if="item.remark">备注：{{ item.remark }}</span>
                        </div>
                    </template>
                </div>
            </div>
            <!-- <div class="box">
                <div class="sellertBox">
                    <div class="author">
                        <span>卖家</span>
                        <span>2020-11-30 15:05:48</span>
                    </div>
                    <van-divider style="margin: 13px 0" />
                    <div class="title">发起了退款申请，等待商家处理</div>
                    <div class="content">
                        售后方式：仅退款，货物状态：未发货，退款金额：¥0.01，退货数量：0，手机号码：13035892831，退款原因：拍错/多拍/不喜欢。
                    </div>
                </div>
            </div> -->
        </div>
        <!-- <van-cell>123</van-cell> -->
        <div class="footer " @click="serviceChat">
            <div class="center-xy">
                <van-icon name="phone-o" />
                联系客服
            </div>
            <!-- <div class="">
                <van-icon name="comment-o" />
                发表留言
            </div> -->
        </div>
        <customerService :shopContact.sync="shopContact"></customerService>
    </div>
</template>

<script>
import customerService from 'components/customerService/customerService'
import { afterSale } from 'api/afterSale'

export default {
    components: {
        customerService
    },
    data() {
        return {
            recordList: [],
            shopContact: false
        }
    },
    computed: {},
    watch: {},
    created() {},
    destroyed() {},
    mounted() {
        const id = this.$route.query.refundSn
        afterSale.getConsultRecord({ refundSn: id }).then((res) => {
            this.recordList = res.data
        })
    },
    methods: {
        // 去客服
        serviceChat() {
            this.shopContact = true
        }
    }
}
</script>
<style src="../../../assets/css/order.css" scoped></style>
<style scoped>
.parentBox :last-child.box {
    margin-bottom: 50px;
}
.clientBox {
    position: relative;
    background: #71de70;
    padding: 10px;
    width: 90%;
    margin: 30px 30px 0;
    border-radius: 10px;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);
}
.clientBox::before {
    position: absolute;
    top: 20px;
    right: -10px;
    content: '';
    width: 0;
    height: 0;
    /* background: #71de70; */
    border-top: 5px solid transparent;
    border-left: 10px solid #71de70;
    border-bottom: 5px solid transparent;
}
.sellertBox {
    position: relative;
    background: #fff;
    padding: 10px;
    width: 90%;
    margin: 30px 15px 0;
    border-radius: 10px;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);
}
.sellertBox::before {
    position: absolute;
    top: 20px;
    left: -10px;
    content: '';
    width: 0;
    height: 0;
    /* background: #71de70; */
    border-top: 5px solid transparent;
    border-right: 10px solid #fff;
    border-bottom: 5px solid transparent;
}
/*  */
.supplierBox {
    position: relative;
    background: #fff;
    padding: 10px;
    width: 90%;
    margin: 30px 15px 0;
    border-radius: 10px;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);
}
.supplierBox::before {
    position: absolute;
    top: 20px;
    left: -10px;
    content: '';
    width: 0;
    height: 0;
    /* background: #71de70; */
    border-top: 5px solid transparent;
    border-right: 10px solid #fff;
    border-bottom: 5px solid transparent;
}

.platformBox {
    position: relative;
    background: #54a1f3;
    padding: 10px;
    width: 90%;
    margin: 30px 15px 0;
    border-radius: 10px;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);
}
.platformBox::before {
    position: absolute;
    top: 20px;
    left: -10px;
    content: '';
    width: 0;
    height: 0;
    /* background: #71de70; */
    border-top: 5px solid transparent;
    border-right: 10px solid #54a1f3;
    border-bottom: 5px solid transparent;
}
.author {
    font-size: 14px;
}
.author span:first-of-type {
    font-weight: 700;
    margin-right: 20px;
}
.content {
    font-size: 12px;
    color: #4a4a4a;
}
.title {
    font-size: 14px;
    margin-bottom: 5px;
    font-weight: 700;
}
.footer {
    position: fixed;
    z-index: 100;
    bottom: 0;
    width: 100%;
    height: 40px;
}
.footer div {
    line-height: 40px;
}
.van-icon {
    vertical-align: middle;
    line-height: 0.1rem;
}
</style>
